<template>
  <div class="merch">
    <div class="mabj">
      <div class="sousuo">
        <!-- <van-search v-model="values" placeholder="请输入搜索关键词" @input="onsearch" /> -->
        <van-search v-model="values" show-action label="" placeholder="请输入搜索关键词" @search="onSearch">
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>

      <div class="cont">
        <vue-loadmore :on-loadmore="onLoad" :finished="finished">
          <!-- <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" @change="valueChange" />
          </van-dropdown-menu> -->
          <div class="cont1" v-for="(item, index) in xmList" :key="item.RowNumber" @click="toxq(item.fyclassdataid)">
            <div class="le">
              <img :src="item.picurl" alt="" />
              <i></i>
            </div>
            <div class="ri">
              <div class="ri1">
                <div class="r11">{{ item.dataname }}</div>
              </div>
              <div class="ri2" v-html="item.descript"></div>

            </div>
          </div>
        </vue-loadmore>
      </div>
    </div>

  </div>
</template>

<script>
import { getxjdb } from "@/api/api.js";
export default {
  name: "",
  data() {
    return {
      values: "",
      finished: false,
      listLength: 0,
      pageIndex: 1,
      pageSize: 10,
      active: 1,
      xmList: [],
      user: JSON.parse(localStorage.getItem('userlogin')),
      value1: 0,
      option1: [
        { text: '全部', value: 0 },
        { text: '吃', value: 992 },
        { text: '穿', value: 993 },
        { text: '用', value: 994 },
      ],
      lx: null,
    };
  },
  created() {
    this.kwd();
  },
  mounted() { },
  methods: {
    valueChange() {
      console.log('value1==', this.value1);
      this.xmList = []
      if (this.value1 == 0) {
        this.lx = null
        this.kwd()
      } else {
        this.lx = this.value1
        this.kwd()
      }

    },
    onSearch() {
      this.xmList = []
      this.pageIndex = 1
      this.kwd()
    },
    filtertt(text) {
      var reg = /<[^<>]+>/g; //1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签
      text = text.replace(reg, ""); //替换HTML标签
      text = text.replace(/&emsp;/gi, ""); //替换HTML空格
      text = text.replace(/&nbsp;/gi, "");
      return text;
    },
    async kwd() {
      let res = await getxjdb({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        mc: this.values,
      });
      if (res.code == 200) {
        this.listLength = res.data.list.length;
        this.xmList = [...this.xmList, ...res.data.list];
        console.log(this.xmList, "pooii");
      }
      console.log("res==", res);
    },
    toxq(id) {
      this.$router.push({ path: "/xjvideo", query: { id: id } });
    },
    onLoad(done) {
      this.pageIndex++;
      if (this.listLength >= 10) {
        this.kwd();
      } else {
        this.finished = true;
      }
      done();
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .vuejs-refresh-head {
  display: none;
}

.merch {
  width: 100vw;
  min-height: 100vh;
  background-color: #f7faff;

  .mabj {
    width: 100%;
    max-height: 25rem;
    // background: url("../../assets/images/bj.png") no-repeat;
    background-size: 100% 100%;

    .sousuo {
      position: static;
      width: calc(100% - 2.25rem);
      // height: 2.375rem;
      padding: 2.125rem 1.125rem 0 1.125rem;
      z-index: 1000000;

      border-radius: 1.1875rem;

      ::v-deep .van-search {
        width: 100%;
        height: 2.375rem;
        padding: 0 !important;
        border-radius: 1.1875rem;
      }

      ::v-deep .van-search__content {
        border-radius: 1.1875rem;
        border: 0.0625rem solid #fff;
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            #f7faff 200%);
      }

      ::v-deep .van-field__left-icon .van-icon {
        font-size: 1.25rem;
        color: #666;
      }
    }

    .cont {
      width: calc(100% - 1.75rem);
      padding: 1rem 0.875rem 0;

      .cont1 {
        display: flex;
        width: calc(100% - 1.5rem);
        padding: 0.75rem;
        background: #ffffff;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;

        .le {
          width: 7.5rem;
          height: 5.625rem;
          position: relative;

          img {
            width: 7.5rem;
            height: 5.625rem;
            border-radius: 0.5rem;
          }

          i {
            width: 1.875rem;
            height: 1.875rem;
            background: url('../../assets/images/play.png') no-repeat;
            background-size: 100% 100%;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
          }
        }

        .ri {
          width: calc(100% - 8.5625rem);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-left: 1.0625rem;

          .ri1 {
            width: 100%;

            .r11 {
              width: 100%;
              font-size: 1rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 1.375rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
            }

            .tip {
              margin-top: .625rem;

              span {
                color: #1374fd;
                background-color: #dae9ff;
                border-color: #dae9ff;
                font-size: .625rem;
                padding: .1875rem .375rem;
                align-items: center;
                border-radius: .1875rem;
              }

              span:first-child {
                margin-right: .3125rem;
              }
            }

            .r12 {
              width: 100%;
              display: flex;
              padding-top: 0.375rem;

              .c_1 {
                color: #6CAAFE;
                background: rgba(108, 170, 254, 0.2);
                // margin-right: .5625rem;
                font-size: .75rem;
                padding: 0 .2rem;
                border-radius: .125rem;
              }
            }
          }

          .ri2 {
            width: 100%;
            font-size: 0.625rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 0.9375rem;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }

          .ri3 {
            font-size: 1.0625rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #FF5167;
            line-height: 1.1875rem;
            text-align: right;

            span {
              font-size: 0.75rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #6B7272;
              line-height: 1.1875rem;
            }
          }
        }
      }
    }
  }

  ::v-deep .van-dropdown-menu {
    .van-dropdown-menu__item {
      -webkit-box-flex: none;
      -webkit-flex: none;
      flex: none;
    }

    .van-dropdown-menu__bar {
      background-color: transparent;
      box-shadow: none;
      // padding-left: 10px;
    }

    .van-dropdown-menu__title::after {
      border-color: transparent transparent #999 #999;
    }
  }
}
</style>